<template>
  <q-btn
    size="12px"
    :color="$q.dark.isActive ? '' : 'grey-8'"
    dense
    flat
    round
    icon="notifications"
  >
    <q-menu
      @show="
        () => {
          showNotice();
        }
      "
    >
      <q-card flat style="width: 340px">
        <q-tabs
          dense
          v-model="tab"
          active-class="text-blue"
          class="text-grey-8"
        >
          <q-tab name="art" icon="list">
            <div
              v-if="!nTag.hideRed && nTag.listFlag"
              class="absolute-right top-2 w-2 h-2 bg-red rounded"
            ></div>
          </q-tab>
          <q-tab name="people" icon="people">
            <div
              v-if="!nTag.hideRed && nTag.peopleFlag"
              class="absolute-right top-2 w-2 h-2 bg-red rounded"
            ></div>
          </q-tab>
          <q-tab name="favorite" icon="favorite">
            <div
              v-if="!nTag.hideRed && nTag.favoriteFlag"
              class="absolute-right top-2 w-2 h-2 bg-red rounded"
            ></div>
          </q-tab>
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="art" class="q-pa-none">
            <ArtPanel></ArtPanel>
          </q-tab-panel>
          <q-tab-panel name="people" class="q-pa-none">
            <PeoplePanel></PeoplePanel>
          </q-tab-panel>
          <q-tab-panel name="favorite" class="q-pa-none">
            <FavoritePanel></FavoritePanel>
          </q-tab-panel>
        </q-tab-panels>
        <div class="row justify-around">
          <q-btn class="w-40px" dense size="sm" flat icon="settings">
            <q-popup-proxy>
              <div class="q-pa-sm">
                <q-toggle
                  v-model="nTag.hideRed"
                  @update:model-value="
                    (val) => {
                      noticeHideRed({ bool: val });
                    }
                  "
                  label="隐藏红点"
                  left-label
                />
              </div>
            </q-popup-proxy>
          </q-btn>
          <q-btn dense flat label="查看全部通知" to="/notice" />
        </div>
      </q-card>
    </q-menu>
    <div v-if="showRed" class="absolute-right w-2 h-2 bg-red rounded"></div>
  </q-btn>
</template>

<script setup lang="ts">
import { noticeFlag, noticeHideRed } from 'src/service/api/notice';
import { computed, onMounted, ref, watch } from 'vue';
import PeoplePanel from './PeoplePanel.vue';
import FavoritePanel from './FavoritePanel.vue';
import { initNoticeTag, nTag } from './shared';
import ArtPanel from './ArtPanel.vue';
import { useQuasar } from 'quasar';

const tab = ref('art');

const $q = useQuasar();

const showNotice = () => {
  flagChage();
};

watch(tab, (nVal) => {
  tab.value = nVal;
  flagChage();
});

const flagChage = () => {
  switch (tab.value) {
    case 'art':
      if (nTag.value.listFlag) {
        noticeFlag({ tab: tab.value }).then(({ error }) => {
          if (!error) {
            nTag.value.listFlag = false;
          }
        });
      }
      break;
    case 'people':
      if (nTag.value.peopleFlag) {
        noticeFlag({ tab: tab.value }).then(({ error }) => {
          if (!error) {
            nTag.value.peopleFlag = false;
          }
        });
      }
      break;
    case 'favorite':
      if (nTag.value.favoriteFlag) {
        noticeFlag({ tab: tab.value }).then(({ error }) => {
          if (!error) {
            nTag.value.favoriteFlag = false;
          }
        });
      }
      break;

    default:
      break;
  }
};

const showRed = computed(() => {
  if (nTag.value.hideRed) {
    return false;
  } else {
    return (
      nTag.value.listFlag || nTag.value.peopleFlag || nTag.value.favoriteFlag
    );
  }
});

onMounted(() => {
  initNoticeTag();
});
</script>

<style scoped></style>
